<template>
  <div class="demo-drawer__content">
    <el-form :model="form" ref="formRef" :rules="rules">
      <!-- <el-form-item v-if="form.uname" label="id" :label-width="formLabelWidth" prop="uid">
        <el-input v-model="form.uid" autocomplete="off"></el-input>
      </el-form-item> -->
      <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="uname">
        <el-input v-model="form.uname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" :label-width="formLabelWidth" prop="upass">
        <el-input v-model="form.upass" show-password></el-input>
      </el-form-item>
      <!-- <el-form-item label="用户角色">
        <el-select v-model="form.rid" placeholder="请选择角色">
          <el-option label="form.rname" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="联系方式" :label-width="formLabelWidth" prop="tel">
        <el-input v-model="form.tel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth" prop="addr">
        <el-input v-model="form.addr" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="info" @click="cancelForm()">取 消</el-button>
    <el-button type="primary" @click="submitForm('formRef')" :loading="loading">{{
      loading? '提交中 ...': '提 交'
    }}</el-button>
  </div>

</template>

<script>
import { update, insert, findAllRoles, updateRoles } from '@/api/hp/api'
export default {

  props: {
    formData: {
      type: Object,
      default() {
        return {
          uid: '',
          uname: '',
          upass: '123456',
          rid: '',
          tel: '',
          addr: ''
        }
      }
    }
  },

  data() {
    return {
      loading: false,
      formLabelWidth: '90px',
      timer: null,
      rules: {
        uid: [
          { required: true, message: '请输入工号' }
        ],
        uname: [
          {
            required: true, message: '请输入姓名'
          }
        ],
        role: [
          {
            required: true, message: '请选择职务'
          }
        ],
        tel: [
          {
            required: true, message: '请输入手机号'
          }
        ],
        addr: [
          {
            required: true, message: '请输入地址'
          }
        ]
      },
      form: {},
    };
  },
  mounted() {

    this.form = this.formData
    this.$refs.formRef.resetFields()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.uid) {
            // 修改操作
            update(this.form).then(res => {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.loading = false;
              this.$emit('close', "edit");
            }).catch(err => {
              this.loading = false;
            }).catch(err => {
              this.loading = false;
            })
          } else {
            // 新增
            insert(this.form).then(res => {
              // updateRoles(this.form).then(response => {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.loading = false;
                this.$emit('close', 'add');
              // })
            }).catch(err => {
              this.loading = false;
            })
          }
        } else {
          return false;
        }
      });


    },
    cancelForm() {
      this.$emit('close');
      this.loading = false;

      clearTimeout(this.timer);

    }


  },


}
</script>

<style>

</style>